<template>
	<view class="content-view content">
		<view class="worker-item">
			<!-- <up-image :src="memberInfo.avatar" width="122rpx" height="144rpx" mode="aspectFit"></up-image> -->
			<view class="worker-info">
				<view class="info-item">
					<view class="label-name">{{detailInfo.name}}</view>
					<view>
						<text class="label-tag">{{detailInfo.levelStr}}</text>
						<text class="label-tag">{{detailInfo.categoryStr}}</text>
					</view>
				</view>
				<view class="info-item">
					<view class="label-view">{{detailInfo.managedEnterprises}}</view>
				</view>
			</view>
		</view>
		<view class="info-title">荣誉照片</view>
		<view class="worker-pic">
			<view class="pic-wrap" v-for="(item,index) in detailInfo.pic">
				<image :src="item"></image>
			</view>
		</view>
		<view class="info-title">主要事迹</view>
		<view class="worker-content">
			<up-parse :content="detailInfo.brief"></up-parse>
		</view>
	</view>
</template>

<script>
	import {communityHonorApi} from '@/api/talent/community-honor-api.js';
	// import {memberUserApi} from '@/api/member/member-uer-api.js';
	export default {
		data() {
			return {
					detailInfo:{},	
					memberInfo:{},
			}
		},
		onLoad(option) {
			const id = option.id;
			this.getDetail(id);
		},
		methods:{
			async getDetail(id){
				const result = await communityHonorApi.getDetail(id);
				this.detailInfo = result.data;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		background-color: #f5f5f5;
		height: 100vh;
	}
	.info-title {
		font-weight: 700;
		font-size: 16px;
		margin-bottom: 20px;
	}
	.worker-item {
		display: flex;
		padding: 30rpx 0;
		margin-bottom: 20px;
		.worker-info {
			margin-left: 20rpx;
			color: #333333;
			font-size: 26rpx;
			line-height: 26px;
			.info-item {
				display: flex;
				.label-view {
					margin-right: 30rpx;
					font-size: 14px;
					color:#999;
				}
				.label-name{
					margin-right: 30rpx;
					font-weight: 700;
					font-size: 16px;
				}
				.label-tag{
					font-size: 12px;
					margin: 0 10rpx;
					color:#999;
				}
			}
		}
		
	}
	.worker-pic{
		display: flex;
		flex-wrap: wrap;
		font-size: 13px;
		color: #333333;
		line-height: 25px;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		.pic-wrap{
			margin: 10rpx;
			width: calc(33.3% - 20rpx);
			image{
				width: 100%;
				height: 144rpx;
				border-radius: 10rpx;
			}
		}
	}
	.worker-content {
		font-size: 13px;
		color: #333333;
		line-height: 25px;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
	}
</style>